<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>抽奖转盘</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
        .jiemian{
            width: 318px;
            height: 318px;
            margin:100px auto;
            color: white;
        }
        .jiemian>div{
            width: 100px;
            height: 100px;
            background: deepskyblue;
            float: left;
            line-height: 100px;
            text-align: center;
            border: solid;
        }
        #act{
            background: black;
        }
        #cj{
            color: aqua;
            background-color: white;
        }

    </style>
</head>
<body>
<div class="jiemian">
    <div class="box" id="act">600元优惠券</div>
    <div class="box">800元优惠券</div>
    <div class="box">1000元优惠券</div>
    <div class="box">800元优惠券</div>
    <div id="cj">
        <button onclick="start()" value="开始">开始</button>
        <button  th:onclick="'end1();'">结束</button>
<!--        <button onclick="end()" value="结束" >结束</button>-->
    </div>
    <div class="box">600元优惠券</div>
    <div class="box">600元优惠券</div>
    <div class="box">1000元优惠券</div>
    <div class="box">谢谢参与</div>

</div>

<!--<form id="test_form" action="add" method="post">-->
<!--    <input name="results" id="results"  value="">-->
<!--    <input type="submit">-->
<!--</form>-->
<div class="data">
    <table border="1px">
        <tr>
            <td>中奖情况</td>
            <td>1000元优惠券</td>
            <td>800元优惠券</td>
            <td>600元优惠券</td>
            <td>谢谢参与</td>

        </tr>
        <tr>
            <td>剩余奖品</td>
            <td id="01" th:text="${vo.remain1000}"></td>
            <td id="02" th:text="${vo.remain800}"></td>
            <td id="03" th:text="${vo.remain600}"></td>
            <td id="04" th:text="${vo.remainNull}"></td>

        </tr>
        <tr>
            <td>已中奖品</td>
            <td id="05" th:text="${vo.hit1000}"></td>
            <td id="06" th:text="${vo.hit800}"></td>
            <td id="07" th:text="${vo.hit600}"></td>
            <td id="08" th:text="${vo.hitNull}"></td>

        </tr>
    </table>
</div>
</div>

<script src="js/jquery-1.7.1.min.js"></script>
<script>
    var arrDiv=document.getElementsByClassName("box");
    var box=document.getElementsByClassName("box");
    var num=0;
    var con = 0;
    var n = 2;

    function start() {//点击开始
        oTime=setInterval(QD,60);
    }

    function end1(){
        console.log('进来的顶顶顶顶');
        $.ajax({
            type: "get",
            url: "/draw",    //向后端请求数据的url
            dataType:'json',
            contentType:'application/json;charset=utf-8',
            success: function (data) {
                clearInterval(oTime);
                console.log('每次返回的类型'+data.lotteryType);
                ns(data.lotteryType);

                $("#01").html(data.remain1000);
                $("#02").html(data.remain800);
                $("#03").html(data.remain600);
                $("#04").html(data.remainNull);
                $("#05").html(data.hit1000);
                $("#06").html(data.hit800);
                $("#07").html(data.hit600);
                $("#08").html(data.hitNull);
                if (data.gameOver==1){
                    alert('已完成20次游戏！')
                }
                console.log('调用方法成功了啊！');
            },
            error: function(e) {
                console.log(e);
            }
        });
    }

    function QD() {
        // lotteryType
       num = Math.floor(Math.random()*10);//随机获取
        if (num>arrDiv.length-1){
            num=0;
        }

        for(j=0;j<arrDiv.length;j++){//控制循环 全涂白
            arrDiv[j].id="";
        }

       arrDiv[num].id="act";//赋予选中的颜色

    }

    function end() {//点击后结束
        con++;
        clearInterval(oTime);
        // ns();
        // alert(num);
        // alert(newnum);
        // alert(box[num].innerHTML);
        console.log(box[num].innerHTML);
        panduan();
    }

    function ns(num1) {
        // newnum = Math.floor(Math.random()*10+1);
        newnum = num1;

        if (newnum==4){
            num=7;
            arrDiv[num].id = "act";
        } else if(newnum==2){
            num=1;
            arrDiv[num].id = "act";
        } else if(newnum==3){
            num=2;
            arrDiv[num].id = "act";
        } else{
            num=4;
            arrDiv[num].id = "act";
        }

        // if (con>0&&con<=5){
        //     if (newnum>=1&&newnum<=n){
        //         if (document.getElementById("07").innerHTML==1){
        //             num=7;
        //             arrDiv[num].id = "act";
        //             n=2;
        //         }else {
        //             num=0;
        //             arrDiv[num].id="act";
        //             n=2;
        //         }
        //     }else {
        //         num = 7;
        //         arrDiv[num].id = "act";
        //         n=n+2;
        //     }
        // }else if (con>5&&con<=10){
        //     if (newnum>=1&&newnum<=n){
        //         if (document.getElementById("06").innerHTML==1){
        //             if (document.getElementById("07").innerHTML==1){
        //                 num=4;
        //                 arrDiv[num].id = "act";
        //                 n=2;
        //             }else {
        //                 num = 4;
        //                 arrDiv[num].id = "act";
        //                 n=2
        //             }
        //         }else {
        //             num=1;
        //             arrDiv[num].id = "act";
        //             n=2;
        //         }
        //
        //     }else {
        //         num = 7;
        //         arrDiv[num].id = "act";
        //         n=n+2;
        //     }
        // }else if (con>10&&con<=16){
        //     if (newnum>=1&&newnum<=n) {
        //         if (document.getElementById("05").innerText == 1) {
        //             num = 7;
        //             arrDiv[num].id = "act";
        //             n = 2;
        //         } else {
        //             num = 2;
        //             arrDiv[num].id = "act";
        //             n = 2;
        //         }
        //
        //     }else {
        //         num = 7;
        //         arrDiv[num].id = "act";
        //         n=n+2;
        //     }
        // }else if (con>16&&con<=20){
        //     if (newnum>=1&&newnum<=n){
        //         if (document.getElementById("06").innerHTML==2){
        //             num = 7;
        //             arrDiv[num].id="act";
        //             n=2;
        //         }else {
        //             num=1;
        //             arrDiv[num].id = "act";
        //             n=2;
        //         }
        //     }else {
        //         num = 7;
        //         arrDiv[num].id = "act";
        //         n=n+2;
        //     }
        // }else if (con>20){
        //     num = 7;
        //     arrDiv[num].id = "act";
        // }


        for(j=0;j<arrDiv.length;j++){//控制循环 全涂白
            arrDiv[j].id="";
        }

        arrDiv[num].id = "act";

    }

    function panduan() {//显示中奖情况
        if (num==7){//谢谢参与

            if (document.getElementById("04").innerHTML==0){
                alert("此奖品已抽完");
                document.getElementById("04").innerHTML==0;

            }else {
                document.getElementById("04").innerHTML--;
                document.getElementById("08").innerHTML++;
            }

        }else if (num==2||num==6){//1000元

            if (document.getElementById("01").innerHTML==0){
                alert("此奖品已抽完");
                document.getElementById("01").innerHTML==0;

            }else {
                document.getElementById("01").innerHTML--;
                document.getElementById("05").innerHTML++;
            }
        }else if (num==1||num==3){//800元
            if (document.getElementById("02").innerHTML==0){
                alert("此奖品已抽完");
                document.getElementById("02").innerHTML==0;

            }else {
                document.getElementById("02").innerHTML--;
                document.getElementById("06").innerHTML++;
            }
        }else if (num==0||num==4||num==5){//600元

            if (document.getElementById("03").innerHTML==0){
                alert("此奖品已抽完");
                document.getElementById("03").innerHTML==0;

            }else {
                document.getElementById("03").innerHTML--;
                document.getElementById("07").innerHTML++;
            }
        }else if (document.getElementById("01").innerHTML&&document.getElementById("02").innerHTML&&document.getElementById("03").innerHTML&&document.getElementById("04").innerHTML){
            clearInterval(oTime);
            alert("游戏结束！！");
        }
        document.getElementById("09").innerHTML--;
    }


</script>

</body>
</html>
